<template lang="pug">
  div.h-100(:style="globalStyle()")
    view-template-form.view-template-form(ref="viewTemplateForm" :properties.sync="templateProperties" :dragList = "initTemplateInfo.sortable[0].list" :sortable = "initTemplateInfo.sortable"  :labelWidth="labelWidth" :pageEvent="initTemplateInfo.pageEvent")
</template>

<script>
// :dragList = "initTemplateInfo.sortable[0].list" :sortable = "initTemplateInfo.sortable"
import viewTemplateForm from './viewTemplateForm'
import { addCSSWithId, addPrefixToCssText, removeElementBySelector } from '../../../../common/utils/domUtil'
import _ from 'lodash'

export default {
  name: 'viewTemplate',
  components: { viewTemplateForm },
  props: ['initTemplateInfo', 'properties'],
  data() {
    return {
      state: {},
      templateProperties: { }, // 首页表单
      labelWidth: '', // 表单样式
      globStyleId: _.uniqueId('globStyleId')
    }
  },
  provide() {
    return {
      rootPage: this
    }
  },
  methods: {
    setState(name, value) {
      this.$set(this.state, name, value)
    },
    // 全局样式
    globalStyle() {
      let globalCss = this.initTemplateInfo.globalCss
      if (globalCss) {
        let themeCss
        let obj = { width: globalCss.pageWidth ? globalCss.pageWidth + 'px' : 'auto' }
        if (!globalCss.customTheme) {
          // 选中主题
          // globalCss.templateThemeId 主题id
          themeCss = { }
        } else {
          themeCss = {
            background: globalCss.backgroundColor,
            'border-color': globalCss.borderColor,
            color: globalCss.fontColor,
            'border-radius': globalCss.borderRadius + 'px'
          }
          this.labelWidth = globalCss.labelWidth
        }
        _.assign(obj, themeCss)
        return obj
      }
    },
    validate() {
      return this.$refs['viewTemplateForm'].validate()
    }
  },
  mounted() {
    this.$el.classList && this.$el.classList.add(this.globStyleId)
    // this.$el.querySelectorAll('.view-template-form')[0].classList.add(this.globStyleId)
  },
  beforeDestroy() {
    // 清除自定义样式
    removeElementBySelector('#' + this.globStyleId)
  },
  created() {
    if (this.properties) {
      this.templateProperties = this.properties
    }
    // 全局自定义样式
    if (this.initTemplateInfo.globalCss.customStyle) {
      addCSSWithId(addPrefixToCssText(this.initTemplateInfo.globalCss.customStyle, '.' + this.globStyleId), this.globStyleId)
    }
  }
}
</script>
<style lang="scss" scoped>
  .view-template-form {
    border: 1px solid transparent;
    box-sizing: border-box;
    // padding: 0 10px;
    height: 100%;
    width: 100%;
    overflow: auto;
  }
</style>
